<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>BootsFaces: next-gen JSF Framework</title>
        <meta name="author" content="Riccardo Massera"></meta>
    </h:head>
    <h:body style="padding-top: 60px">
        <ui:composition template="/applayout/pageTemplate.xhtml">
            <ui:define name="content">
                <h1>Button Groups and Toolbars</h1>
                <p>BootsFaces lets you group a series of buttons together on a single line using the <code>&lt;b:buttonGroup&gt;</code> component.</p>
                <h3>Basic example</h3>
                <p>Wrap a series of <code>&lt;b:button&gt;</code>s or <code>&lt;b:commandButton&gt;</code>s by enclosing them in a <code>&lt;b:buttonGroup&gt;</code> .</p>
                <b:panel look="info">
                    <f:facet name="heading"><b>EXAMPLE - Basic</b></f:facet>
                        <b:buttonGroup>
                            <b:button value="Left" />
                            <b:button value="Middle" />
                            <b:button value="Right" />
                        </b:buttonGroup>
                    <f:facet name="footer">
                        <strong>Markup:</strong><br/>
                        <script type="syntaxhighlighter" class="brush: xml; toolbar: false;">
                        <![CDATA[
                        <b:buttonGroup>
                            <b:button value="Left" />
                            <b:button value="Middle" />
                            <b:button value="Right" />
                        </b:buttonGroup>
                        ]]></script>
                    </f:facet>
                </b:panel>
                
                <h3>Button toolbar</h3>
                <p>You can go further and obtain a Toolbar combining sets of <code>&lt;b:buttonGroup&gt;</code>s inside a <code>&lt;b:buttonToolbar&gt;</code></p>
                <b:panel look="info">
                    <f:facet name="heading"><b>EXAMPLE - Toolbar</b></f:facet>
                    <b:buttonToolbar>
                        <b:buttonGroup>
                            <b:button value="1" />
                            <b:button value="2" />
                            <b:button value="3" />
                            <b:button value="4" />
                        </b:buttonGroup>
                        <b:buttonGroup>
                            <b:button value="5" />
                            <b:button value="6" />
                            <b:button value="7" />
                        </b:buttonGroup>
                        <b:buttonGroup>
                            <b:button value="8" />
                            <b:button value="9" />
                        </b:buttonGroup>
                    </b:buttonToolbar>
                    <f:facet name="footer">
                        <strong>Markup:</strong><br/>
                        <script type="syntaxhighlighter" class="brush: xml; toolbar: false;">
                        <![CDATA[
                        <b:buttonToolbar>
                            <b:buttonGroup>
                                <b:button value="1" />
                                <b:button value="2" />
                                <b:button value="3" />
                                <b:button value="4" />
                            </b:buttonGroup>
                            <b:buttonGroup>
                                <b:button value="5" />
                                <b:button value="6" />
                                <b:button value="7" />
                            </b:buttonGroup>
                            <b:buttonGroup>
                                <b:button value="8" />
                                <b:button value="9" />
                            </b:buttonGroup>
                        </b:buttonToolbar>
                        ]]></script>
                    </f:facet>
                </b:panel>
                <h3>Sizing</h3>
                <p>Instead of applying button size attribute to every button in a group, just add the size attribute to the <code>&lt;b:buttonGroup&gt;</code>.</p>
                <b:panel look="info">
                    <f:facet name="heading"><b>EXAMPLE - Sizing</b></f:facet>
                        <b:buttonGroup size="lg">
                            <b:button value="Left" />
                            <b:button value="Middle" />
                            <b:button value="Right" />
                        </b:buttonGroup> <p/>
                        <b:buttonGroup>
                            <b:button value="Left" />
                            <b:button value="Middle" />
                            <b:button value="Right" />
                        </b:buttonGroup> <p/>
                        <b:buttonGroup size="sm">
                            <b:button value="Left" />
                            <b:button value="Middle" />
                            <b:button value="Right" />
                        </b:buttonGroup> <p/>
                        <b:buttonGroup size="xs">
                            <b:button value="Left" />
                            <b:button value="Middle" />
                            <b:button value="Right" />
                        </b:buttonGroup>
                    <f:facet name="footer">
                        <strong>Markup:</strong><br/>
                        <script type="syntaxhighlighter" class="brush: xml; toolbar: false;">
                        <![CDATA[
                        <b:buttonGroup size="lg">
                            <b:button value="Left" />
                            <b:button value="Middle" />
                            <b:button value="Right" />
                        </b:buttonGroup> <p/>
                        <b:buttonGroup>
                            <b:button value="Left" />
                            <b:button value="Middle" />
                            <b:button value="Right" />
                        </b:buttonGroup> <p/>
                        <b:buttonGroup size="sm">
                            <b:button value="Left" />
                            <b:button value="Middle" />
                            <b:button value="Right" />
                        </b:buttonGroup> <p/>
                        <b:buttonGroup size="xs">
                            <b:button value="Left" />
                            <b:button value="Middle" />
                            <b:button value="Right" />
                        </b:buttonGroup>
                        ]]></script>
                    </f:facet>
                </b:panel>
                <h3>Mixed Button Groups</h3>
                <p>If you want dropdown menus mixed with a series of buttons, just add the <code>&lt;b:dropButton&gt;</code> inside the <code>&lt;b:buttonGroup&gt;</code>.</p>
                <p>You can even use <b>different looks</b> and/or <b>icons</b> for your buttons, if you need to.</p>
                <b:panel look="info">
                    <f:facet name="heading"><b>EXAMPLE - Mixing Buttons</b></f:facet>
                    <b:buttonGroup>
                        <b:button look="success" value="1" />
                        <b:button look="primary" icon="print" value="" />
                        <b:dropButton look="warning" value="DropButton">
                            <b:navLink value="Action" href="#"></b:navLink>
                            <b:navLink value="Another action" href="#"></b:navLink>
                            <b:navLink value="Something else here" href="#"></b:navLink>
                            <b:navLink></b:navLink>
                            <b:navLink header="Nav header"></b:navLink>
                            <b:navLink value="Separated link" href="#"></b:navLink>
                            <b:navLink value="One more separated link" href="#"></b:navLink>
                        </b:dropButton>
                    </b:buttonGroup>
                    <f:facet name="footer">
                        <strong>Markup:</strong><br/>
                        <script type="syntaxhighlighter" class="brush: xml; toolbar: false;">
                        <![CDATA[
                        <b:buttonGroup>
                            <b:button look="success" value="1" />
                            <b:button look="primary" icon="print" value="" />
                            <b:dropButton value="DropButton">
                                ...
                            </b:dropButton>
                        </b:buttonGroup>
                        ]]></script>
                    </f:facet>
                </b:panel>
                <h3>Vertical variation</h3>
                <p>Make a set of buttons appear vertically stacked rather than horizontally, using the <code>orientation="vertical"</code> attribute.</p>
                <b:panel look="info">
                    <f:facet name="heading"><b>EXAMPLE - Vertical variation</b></f:facet>
                    <b:buttonGroup orientation="vertical">
                            <b:button value="Button" />
                            <b:button value="Button" />
                            <b:dropButton value="DropButton">
                                <b:navLink value="Action" href="#"></b:navLink>
                                <b:navLink value="Another action" href="#"></b:navLink>
                                <b:navLink value="Something else here" href="#"></b:navLink>
                                <b:navLink></b:navLink>
                                <b:navLink header="Nav header"></b:navLink>
                                <b:navLink value="Separated link" href="#"></b:navLink>
                                <b:navLink value="One more separated link" href="#"></b:navLink>
                            </b:dropButton>
                            <b:button value="Button" />
                            <b:button value="Button" />
                            <b:dropButton value="DropButton">
                                <b:navLink value="Action" href="#"></b:navLink>
                                <b:navLink value="Another action" href="#"></b:navLink>
                                <b:navLink value="Something else here" href="#"></b:navLink>
                                <b:navLink></b:navLink>
                                <b:navLink header="Nav header"></b:navLink>
                                <b:navLink value="Separated link" href="#"></b:navLink>
                                <b:navLink value="One more separated link" href="#"></b:navLink>
                            </b:dropButton>
                            <b:dropButton value="DropButton">
                                <b:navLink value="Action" href="#"></b:navLink>
                                <b:navLink value="Another action" href="#"></b:navLink>
                                <b:navLink value="Something else here" href="#"></b:navLink>
                                <b:navLink></b:navLink>
                                <b:navLink header="Nav header"></b:navLink>
                                <b:navLink value="Separated link" href="#"></b:navLink>
                                <b:navLink value="One more separated link" href="#"></b:navLink>
                            </b:dropButton>
                        </b:buttonGroup>
                    <f:facet name="footer">
                        <strong>Markup:</strong><br/>
                        <script type="syntaxhighlighter" class="brush: xml; toolbar: false;">
                        <![CDATA[
                        <b:buttonGroup orientation="vertical">
                            ...
                        </b:buttonGroup>
                        ]]></script>
                    </f:facet>
                </b:panel>
                
                <script type="text/javascript">
                    SyntaxHighlighter.all();
                </script>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
